import React, {Component} from 'react';
import {
  createAppContainer,
  createBottomTabNavigator
} from 'react-navigation';
import {connect} from 'react-redux';
import {BottomTabBar} from 'react-navigation-tabs';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Entypo from 'react-native-vector-icons/Entypo';
import TrendingPage from "../page/TrendingPage";
import MyPage from "../page/MyPage";
import PopularPage from "../page/PopularPage";
import FavoritePage from "../page/FavoritePage";

// BottomTab导航对象
const TABS = {
  PopularPage: {
    screen: PopularPage,
    navigationOptions: {
      tabBarLabel: '最热',
      tabBarIcon: ({tintColor}) => (
        <MaterialIcons
          name={'whatshot'}
          color={tintColor}
          size={26}
        />
      )
    }
  },
  TrendingPage: {
    screen: TrendingPage,
    navigationOptions: {
      tabBarLabel: '趋势',
      tabBarIcon: ({tintColor}) => (
        <MaterialIcons
          name={'trending-up'}
          color={tintColor}
          size={26}
        />
      )
    }
  },
  FavoritePage: {
    screen: FavoritePage,
    navigationOptions: {
      tabBarLabel: '收藏',
      tabBarIcon: ({tintColor}) => (
        <MaterialIcons
          name={'favorite'}
          color={tintColor}
          size={26}
        />
      )
    }
  },
  MyPage: {
    screen: MyPage,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({tintColor}) => (
        <Entypo
          name={'user'}
          color={tintColor}
          size={26}
        />
      )
    }
  }
};

type Props = {}
class DynamicTabNavigator extends Component<Props>{
  constructor(props) {
    super(props);
  }

  _tabNavigator() {
    // 因为订阅了theme，所以每次theme改变时都会执行render方法，将BottomTab变为初始状态
    // 做特殊处理，防止重复创建
    if (this.BottomTab) {
      return this.BottomTab;
    }
    const {PopularPage, TrendingPage, FavoritePage, MyPage} = TABS;
    const tabs = {PopularPage, TrendingPage, FavoritePage, MyPage}; // 自定义显示tab
    // tabs.TrendingPage.navigationOptions.tabBarLabel = '趋势'; // 修改tab文本
    return this.BottomTab = createAppContainer(
      createBottomTabNavigator(tabs, {
        tabBarComponent: props => ( // 返回自定义tabBar组件，并将订阅的props中的theme属性传递进去
          <TabBarComponent {...props} theme={this.props.theme}/>
        )
      })
    );
  }

  render() {
    const Tab = this._tabNavigator();
    return <Tab/>;
  }
}

class TabBarComponent extends Component<Props> {
  constructor(props) {
    super(props);
    // 设置默认主题色(不使用redux的实现方法)
    // this.theme = {
    //   tintColor: props.activeTintColor,
    //   updateTime: new Date().getTime()
    // }
  }
  render() {
    // 动态改变主题色(不使用redux的实现方法)
    // const {index, routes} = this.props.navigation.state;
    // if (routes[index].params) {
    //   const theme = routes[index].params.theme;
    //   if (theme && theme.updateTime > this.theme.updateTime) {
    //     this.theme = theme;
    //   }
    // }
    return <BottomTabBar
      {...this.props}
      // activeTintColor={this.theme.tintColor || this.props.activeTintColor} // (不使用redux的实现方法)
      activeTintColor={this.props.theme} // 使用订阅的theme
    />
  }
}

/**
 * 订阅theme，将state中的theme映射到组件props中的theme属性
 * @param state
 * @returns {{state: "react-navigation".NavigationState}}
 */
const mapStateToProps = state => ({
  theme: state.theme.theme // 第一级theme是reducer/index中合并reducer时对应的键，第二级theme是state中的theme属性
});

/**
 * 连接 React组件 与 Redux Store
 */
export default connect(mapStateToProps)(DynamicTabNavigator);